<template>
  <div class="clearfix">
    <a-upload  :class="[showClientUpdateBtn ? 'upload-disable':'']"
               :action="clientAction"
               name="files"
               list-type="picture-card"
               :file-list="fileList"
               @preview="handlePreview"
               @change="handleChange"
    >
      <div v-if="fileList.length < 5 && !showClientUpdateBtn">
        <a-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
  import ip from '@/api/global_variable'
  import api from '@/server/userConfig';
  import GLOBAL from "@/api/global_variable"
  import imgDownUrl from '../../../api/global_variable';
  function getBase64 (file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  export default {
    name: 'ClientImage',
    props: {
      newFileList: Array,
      showClientUpdateBtn: Boolean
    },
    computed: {
      clientAction: function () {
        return GLOBAL.localIp + '/moreImgFileUpload.action';
      }
    },
    watch: {
      newFileList: function (newVal) {
        if (newVal.length > 0) {
          this.initPicture();
        }
      }
    },
    data () {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: [],
      };
    },
    methods: {
      handleCancel () {
        this.previewVisible = false;
      },
      async handlePreview (file) {
        console.log(file);
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      handleChange ({file, fileList}) {
        if (file.status === 'uploading') {
          this.fileList = fileList;
        }
        //console.log(fileList);
        //console.log(file);
        else if (file.status === 'done') {
          this.fileList = fileList;
          file = fileList[fileList.length - 1];
          // 取出响应数据中的图片文件名和url
          const { id, url } = file.response.Data[0];
          // 保存到上传的file对象
          file.id = id;
          file.url = ip.imgDownUrl + url;
          //console.log(file);
          //console.log(fileList);
          if (fileList.length === 0) {
            this.$message.info('请添加至少一张图片');
            return
          }
          this.$emit('handleChangePic', fileList);
        }else if (file.status === 'removed') { // 删除
          this.$Modal.confirm({
            title: '确定删除此图片吗?',
            content: '',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
              if (fileList.length === 0) {
                this.$message.info('请添加至少一张图片');
                return
              }
              this.fileList = fileList;
              this.$emit('handleChangePic', fileList);
            },
            onCancel () {}
          });
        }
      },

      // 初始化获取图片;
      async initPicture () {
        this.fileList = this.newFileList;
      }
    },
  }
</script>

<style>
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
